{extend name="admin@public/base" /}
{block name="main-content"}
<link href="__PUBLIC__/ztree/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/tagEditor/jquery.tag-editor.css" media="all" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/jquery-ui/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
<style>
    body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
    html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
    p, td { line-height: 1.5; }
    ul { padding: 0 0 0 20px; }

    th { background: #eee; white-space: nowrap; }
    th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
    td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }

    h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
    h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
    h2 { font-size: 2em; color: #636363; }
    h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
    h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
    a { color: #4e99c7; text-decoration: none; }
    a:hover { text-decoration: underline; }
    p, pre { margin: 0 0 1.2em; }
    ::selection { color: #fff; background: #328efd; }
    ::-moz-selection { color: #fff; background: #328efd; }

    @media (max-width:480px) {
        h1 { font-size: 3em; }
        h2 { font-size: 1.8em; }
        h3 { font-size: 1.5em; }
        td:first-child { white-space: normal; }
    }

    .inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
    pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
    pre i { color: #aaa; } /* comments */
    pre b { font-weight: normal; color: #cf4b25; } /* strings */
    pre em { color: #0c59e9; } /* numeric */

    /* Pure CSS */
    .pure-button { margin: 5px 0; text-decoration: none !important; }
    .button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
    .button-sm { font-size: 85%; }

    textarea {
        width: 100%; height: 29px; padding: .3em .5em; border: 1px solid #ddd; font-size: .9em;
        box-sizing: border-box; margin: 0 0 20px;
    }
    textarea[readonly] { color: #aaa; background: #f7f7f7; }

    #response {
        margin: 0 0 1.2em; padding: 10px; background: #f3f3f3; color: #777;
        font-size: .9em; max-height: 150px; overflow: hidden; overflow-y: auto;
    }
    #response i { font-style: normal; color: #cf4b25; }
    #response hr { margin: 2px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fdfdfd; }

    /* overwrite default CSS for tiny, dark tags in demo5 */
    #demo5+.tag-editor { background: #fafafa; font-size: 12px; }
    #demo5+.tag-editor .tag-editor-tag { color: #fff; background: #555; border-radius: 2px; }
    #demo5+.tag-editor .tag-editor-spacer { width: 7px; }
    #demo5+.tag-editor .tag-editor-delete { display: none; }

    /* color tags */
    .tag-editor .red-tag .tag-editor-tag { color: #c65353; background: #ffd7d7; }
    .tag-editor .red-tag .tag-editor-delete { background-color: #ffd7d7; }
    .tag-editor .green-tag .tag-editor-tag { color: #45872c; background: #e1f3da; }
    .tag-editor .green-tag .tag-editor-delete { background-color: #e1f3da; }
</style>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div>
                <ul class="nav nav-tabs">
                    <li class="{eq name='$tab_type' value='1'}active{/eq}"><a href="{:url('Message/sendMessage',array('tab_type'=>1))}">站内信</a></li>
                    <li class="{eq name='$tab_type' value='2'}active{/eq}"><a href="{:url('Message/sendMessage',array('tab_type'=>2))}">通知公告</a></li>
                </ul>
                <form  class="form-horizontal ajaxForm2" action="" name="system_message" id="system_message" method="post">
                    <div class="tabInner" style="padding-top:10px;max-width: 100%;">
                        <div class="info">
                            <table class="table  table-bordered " >
                                <tr>  
                                    <th style="width: 10%;"><span>发送范围</span></th>
                                    <td style="width: 60%;">
                                        全体
                                    </td>
                                </tr>

                                <tr>  
                                    <th style="width: 10%;"><span>消息标题</span></th>
                                    <td style="width: 60%;">
                                        <input  type="text"  name="message_title" id="message_title" style="width: 100%; " value="" required >
                                    </td>
                                </tr>
                                <tr>    
                                    <th style="width: 10%;"><span>消息内容</span></th>
                                    <td style="width: 60%;">
                                        <script src="__PUBLIC__/ueditor/ueditor.config.js" type="text/javascript"></script>
                                        <script src="__PUBLIC__/ueditor/ueditor.all.js" type="text/javascript"></script>
                                        <textarea name="message_content" rows="100%" style="width:100%" id="myEditor"  ></textarea>
                                        <script type="text/javascript">
                                            var editor = new UE.ui.Editor();
                                            editor.render("myEditor");
                                            editor.ready(function() {  
                                                editor.setHeight(240);
                                            });
                                        </script>
                                        <!--textarea name="message_content" style="width:100%;height:350px;visibility:hidden;" class="validate[required]" data-errormessage-value-missing="*内容必须填写"></textarea-->
                                    </td>
                                </tr>
                                <tr>    
                                    <th style="width: 10%;"><span>发送人</span></th>
                                    <td style="width:60%;text-align: left;height: 28px;">
                                        {:session('userinfo.name')}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td" colspan="3">
                                        <div class="layer-self-btn col-md-offset-3">
                                            <input type="hidden" value="pub_message" name="action_type">
                                            <input type="hidden" value="1" id="send_type" name="send_type">
                                            <input type="hidden" value="1" id="send_range" name="send_range">

                                            <button class="btn btn-info" type="submit">
                                                <i class="ace-icon fa fa-check bigger-110"></i>发 送
                                            </button>&nbsp; &nbsp; &nbsp;
                                            <button class="btn" type="reset" onclick="javascript:location.reload();">
                                                <i class="ace-icon fa fa-undo bigger-110" ></i>重置
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="__PUBLIC__/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="__PUBLIC__/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="__PUBLIC__/tagEditor/jquery.tag-editor.min.js"></script>
<script src="__PUBLIC__/tagEditor/jquery.caret.min.js"></script>
<script src="__PUBLIC__/jquery-ui/jquery-ui.min.js"></script>
<script>
                                            var setting = {
                                                check: {
                                                    enable: true,
                                                    chkboxType: {"Y": "ps", "N": "ps"}
                                                },
                                                data: {
                                                    simpleData: {
                                                        enable: true,
                                                        pIdKey: "pid",
                                                    }
                                                },
                                                callback: {
                                                    beforeClick: beforeClick,
                                                    onCheck: onCheck
                                                }
                                            };

                                            var settingUser = {
                                                check: {
                                                    enable: true,
                                                    chkboxType: {"Y": "", "N": ""}
                                                },
                                                data: {
                                                    simpleData: {
                                                        enable: true,
                                                        pIdKey: "pid",
                                                    }
                                                },
                                                callback: {
                                                    beforeClick: beforeClickUser,
                                                    onCheck: onCheckUser
                                                }
                                            };

                                            var zNodes = {$deptListJson};
                                                    var zNodesUser = {$userListJson};
                                            var code;

                                            function setCheck(id) {
                                                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                                                        type = {"Y": "s", "N": "s"};//ps
                                                zTree.setting.check.chkboxType = type;
                                                showCode('setting.check.chkboxType = { "Y" : "s", "N" : "s" };');
                                            }

                                            function setCheckUser(id) {
                                                var zTree = $.fn.zTree.getZTreeObj("treeDemoUser"),
                                                        type = {"Y": "s", "N": "s"};//ps
                                                zTree.setting.check.chkboxType = type;
                                                showCode('setting.check.chkboxType = { "Y" : "s", "N" : "s" };');
                                            }

                                            function showCode(str) {
                                                if (!code)
                                                    code = $("#code");
                                                code.empty();
                                                code.append("&lt;li&gt;" + str + "&lt;/li&gt;");
                                            }

                                            $(document).ready(function() {
                                                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                                                setCheck();
                                                $.fn.zTree.init($("#treeDemoUser"), settingUser, zNodesUser);
                                                setCheckUser("#treeDemoUser");
                                                $('#dept_input').tagEditor({
                                                    placeholder: '右侧勾选需要发送消息的部门/人员名单',
                                                    maxTags: 100,
                                                    forceLowercase: false,
                                                    animateDelete: 180,
                                                    sortable: true,
                                                    clickDelete: true,
                                                });

                                            });
                                            function beforeClick(treeId, treeNode) {
                                                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                                                zTree.checkNode(treeNode, !treeNode.checked, null, true);
                                                return false;
                                            }
                                            /*
                                             * 选中节点
                                             */
                                            function onCheck(e, treeId, treeNode)
                                            {
                                                var dept_name = treeNode.name + "<" + treeNode.id + ">";
                                                var is_checked = treeNode.checked;
                                                //查看是否已经选中过此节点
                                                if (is_checked == true) {
                                                    $('#dept_input').tagEditor('addTag', dept_name, false);
                                                    add_hidden_dept(treeNode.id);
                                                    if (treeNode.isParent) {
                                                        //循环设置选中子部门
                                                        add_dept_recursive(treeNode.children);
                                                    }
                                                } else {
                                                    //优先循环删除子部门
                                                    if (treeNode.isParent) {
                                                        remove_dept_recursive(treeNode.children);
                                                    }

                                                    $('#dept_input').tagEditor('removeTag', dept_name, false);
                                                    remove_hidden_dept(treeNode.id);
                                                }

                                            }

                                            //添加隐藏部门
                                            function add_hidden_dept(dept_id, pid)
                                            {
                                                var hidden_dept = "<input type ='hidden' class = 'hidden_dept_id' name ='hidden_dept_id[]' id ='hidden_dept_id_" + dept_id + "' value ='" + dept_id + "'>";
                                                $('#send_type').after(hidden_dept);
                                            }

                                            //删除隐藏部门元素
                                            function remove_hidden_dept(dept_id)
                                            {
                                                $("#hidden_dept_id_" + dept_id).remove();
                                            }

                                            /*
                                             * 递归添加发送部门
                                             */
                                            function add_dept_recursive(sub_tree)
                                            {
                                                for (var i = 0; i < sub_tree.length; i++)
                                                {
                                                    var hidden_dept_id = $("#hidden_dept_id_" + sub_tree[i].id).val();

                                                    if (hidden_dept_id > 0)
                                                    {
                                                        continue;
                                                    }

                                                    add_hidden_dept(sub_tree[i].id, sub_tree[i].pid);
                                                    var dept_name = sub_tree[i].name + "<" + sub_tree[i].id + ">";
                                                    $('#dept_input').tagEditor('addTag', dept_name);

                                                    if (sub_tree[i].isParent == true && sub_tree[i].children.length > 0)
                                                    {
                                                        add_dept_recursive(sub_tree[i].children);
                                                    }
                                                }
                                            }

                                            /*
                                             * 递归删除发送部门
                                             */
                                            function remove_dept_recursive(sub_tree)
                                            {
                                                for (var i = 0; i < sub_tree.length; i++)
                                                {
                                                    var dept_name = sub_tree[i].name + "<" + sub_tree[i].id + ">";
                                                    $('#dept_input').tagEditor('removeTag', dept_name);

                                                    $("#hidden_dept_id_" + sub_tree[i].id).remove();
                                                    if (sub_tree[i].isParent == true && sub_tree[i].children.length > 0)
                                                    {
                                                        remove_dept_recursive(sub_tree[i].children);
                                                    }
                                                }
                                            }

                                            //选项卡点击事件
                                            $("#myTab a").click(function() {
                                                //清空文本框和隐藏字段
                                                // Remove all tags
                                                var tags = $('#dept_input').tagEditor('getTags')[0].tags;
                                                for (i = 0; i < tags.length; i++) {
                                                    $('#dept_input').tagEditor('removeTag', tags[i]);
                                                }
                                                $('.hidden_dept_id').remove();
                                                $('.hidden_user_id').remove();
                                            });

                                            function beforeClickUser(treeId, treeNode) {
                                                var zTree = $.fn.zTree.getZTreeObj("treeDemoUser");
                                                zTree.checkNode(treeNode, !treeNode.checked, null, true);
                                                return false;
                                            }

                                            /*
                                             * 选中节点
                                             */
                                            function onCheckUser(e, treeId, treeNode)
                                            {
                                                var user_name = treeNode.name + "<" + treeNode.id + ">";
                                                var is_checked = treeNode.checked;
                                                if (is_checked == true)
                                                {
                                                    $('#dept_input').tagEditor('addTag', user_name, false);
                                                    add_hidden_user(treeNode.id);
                                                } else {
                                                    $('#dept_input').tagEditor('removeTag', user_name, false);
                                                    remove_hidden_user(treeNode.id);
                                                }
                                            }

                                            //添加隐藏用户
                                            function add_hidden_user(user_id)
                                            {
                                                var hidden_user = "<input type ='hidden' class = 'hidden_user_id' name ='hidden_user_id[]' id ='hidden_user_id_" + user_id + "' value ='" + user_id + "'>";
                                                $('#send_type').after(hidden_user);
                                            }
                                            //删除隐藏用户元素
                                            function remove_hidden_user(user_id)
                                            {
                                                $("#hidden_user_id_" + user_id).remove();
                                            }
                                            $(document).ready(function() {
                                                $("#user_name_by_pinyin").autocomplete({
                                                    minLength: 1,
                                                    mustMatch: true,
                                                    source: function(request, response)
                                                    {
                                                        var name = request.term;
                                                        $.getJSON("{:url('admin/Message/ajaxGetUserInfoByName')}", request, function(data, status, xhr)
                                                        {
                                                            response(JSON.parse(data));
                                                        });
                                                    },
                                                    select: function(event, ui)
                                                    {
                                                        if (ui.item.id > 0)
                                                        {
                                                            $(this).val('');
                                                            var user_name = ui.item.name + "<" + ui.item.id + ">";
                                                            var hidden_user_id = $("#hidden_user_id_" + ui.item.id).val();
                                                            if (hidden_user_id > 0)
                                                            {
                                                                layer.msg('不要重复选择人员名单');
                                                                return true;
                                                            }

                                                            $('#dept_input').tagEditor('addTag', user_name, false);
                                                            add_hidden_user(ui.item.id);
                                                            removeinput = 0;
                                                        }
                                                        return false;
                                                    },
                                                    focus: function() {
                                                        return false;
                                                    }
                                                }).data("ui-autocomplete")._renderItem = function(ul, item)
                                                {
                                                    if (item.id > 0)
                                                    {
                                                        var show_text = "<a>" + item.name + "&nbsp;&nbsp;[<font style='color:red;'>" + item.dept_name + "</font>]</a>";
                                                    }
                                                    else
                                                    {
                                                        var show_text = "<a>" + item.name + "</a>";
                                                    }
                                                    return $("<li>").append(show_text).appendTo(ul);
                                                };

                                            });



</script>
{/block}